import React, {Component, createRef} from 'react';
import {connect} from "react-redux";
import {addPerson} from "../../redux/actions/person";

class Person extends Component {
  name = createRef()
  age = createRef()
  handleSubmit = () => {
    // 状态提交
    this.props.addPerson({
      id: 2001,
      name: this.name.current.value,
      age: this.age.current.value
    })
  }
  render() {
    const {count, persons} = this.props
    return (
      <div>
        <h1>当前求和为: {count}</h1>
        姓名: <input type="text" ref={this.name}/> &nbsp; &nbsp;
        年龄: <input type="number" ref={this.age}/> &nbsp; &nbsp;
        <button onClick={this.handleSubmit}>提交</button>
        <br/>
        <ul>
          {persons.map(person => {
            return (<li key={person.id}>
              {person.id}-{person.name}-{person.age}
            </li>)
          })}
        </ul>
      </div>
    )
  }
}

export default connect(
  state => ({...state}),
  {addPerson}
)(Person)